<template>
  <div class="comment-list">
    <div class="comment-item" v-for="item in commentList" :key="item.id">
      <el-popover placement="bottom-start" width="360" trigger="hover">
        <div class="info-item">
          <img
            :src="item.bgCover || require('@/static/personal-bg.jpg')"
            alt=""
          />
          <div>
            <img
              :src="item.avatar || require('@/static/UserAvatar.png')"
              alt=""
              @click.stop="handleGoOtherUser('/OtherUser/' + item.observer_id)"
            />
            <p
              @click.stop="handleGoOtherUser('/OtherUser/' + item.observer_id)"
            >
              {{ item.nickname }}
            </p>
            <span>{{ item.introduct }}</span>
            <ul>
              <li
                @click.stop="
                  handleGoOtherUser('/OtherUser/' + item.observer_id, 'first')
                "
              >
                <p>{{ item.article_num }}</p>
                <span>文章</span>
              </li>
              <li
                @click.stop="
                  handleGoOtherUser('/OtherUser/' + item.observer_id, 'second')
                "
              >
                <p>{{ item.comment_num }}</p>
                <span>评论</span>
              </li>
              <li
                @click.stop="
                  handleGoOtherUser('/OtherUser/' + item.observer_id, 'third')
                "
              >
                <p>0</p>
                <span>问题</span>
              </li>
              <li
                @click.stop="
                  handleGoOtherUser('/OtherUser/' + item.observer_id, 'third')
                "
              >
                <p>0</p>
                <span>回答</span>
              </li>
              <li
                @click.stop="
                  handleGoOtherUser('/OtherUser/' + item.observer_id, 'fourth')
                "
              >
                <p>0</p>
                <span>粉丝</span>
              </li>
            </ul>
            <div>
              <button><i class="el-icon-plus"></i>关注</button>
              <button><i class="el-icon-message"></i>私信</button>
            </div>
          </div>
        </div>
        <div
          class="user-info"
          slot="reference"
          @click.stop="handleGoOtherUser('/OtherUser/' + item.observer_id)"
        >
          <img
            :src="
              item.avatar ? item.avatar : require('@/static/UserAvatar.png')
            "
            alt=""
          />
          <span>{{ item.nickname }}</span>
        </div>
      </el-popover>
      <div>
        <p>{{ item.create_time }}</p>
      </div>
      <div>{{ item.content }}</div>
      <div>
        评论于
        <nuxt-link :to="'/content-article/' + item.article_id">{{
          item.title
        }}</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentList: [],
    };
  },
  async fetch() {
    const res = await this.$api.getCommentList();
    this.commentList = res.data;
    this.$nextTick(() => {
      if (typeof document != "undefined") {
        document.querySelector(".comment-list").style.top =
          -(
            document.querySelector(".comment-list").offsetHeight -
            document.querySelector("html").clientHeight
          ) + "px";
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      document.querySelector(".comment-list").style.top =
        -(
          document.querySelector(".comment-list").offsetHeight -
          document.querySelector("html").clientHeight
        ) + "px";
    });
  },
  methods: {
    handleGoOtherUser(path, activeName) {
      if (activeName) {
        this.$cookies.set("activeName", activeName);
      } else {
        this.$cookies.set("activeName", "first");
      }
      this.$router.push(path);
    },
  },
};
</script>

<style lang="less" scoped>
.comment-list {
  position: sticky;
  margin-top: 20px;
  padding: 15px;
  background: #fff;
  .comment-item {
    padding: 15px 0;
    border-bottom: 1px solid #cccccc48;
    > span {
      max-width: 50%;
      font-size: 14px;
      position: absolute;
      .user-info {
        flex: 1;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 5px;
        }
        span {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    > div {
      font-size: 14px;
      &:nth-of-type(1) {
        text-align: right;
        margin-bottom: 10px;
        p {
          height: 30px;
          line-height: 30px;
          color: #26262699;
        }
      }
      &:nth-of-type(2) {
        padding: 10px;
        margin-bottom: 10px;
        background: #f6f6f6;
        position: relative;
        line-height: 1.6;
        &::before {
          content: "";
          display: block;
          width: 10px;
          height: 10px;
          position: absolute;
          top: -3px;
          left: 10px;
          transform: rotate(45deg);
          background: #f6f6f6;
        }
      }
      &:nth-of-type(3) {
        font-size: 13px;
        color: #26262699;
        display: flex;
        line-height: 1.2;
        a {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>